<template>
  <div class="index myindex">
    <!-- 轮播图 -->
	     <!-- Add Pagination -->
    <div class="swiper-pagination">
	  <button @click="arrow(-1)" class="left-btn">←</button>
	  <button @click="arrow(1)" class="right-btn">→</button>
	</div>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <img :src="swiperData[img_code].img" />
        <!-- <img :src="swiperData[img_code+1].img" /> -->
        <!-- <img  src="../assets/images/pic/logo.png" />
        <img  src="../assets/images/pic/logo.png" />
        <img  src="../assets/images/pic/logo.png" /> -->
      </div>
    </div>
  </div>
</template>
<script>
import helper from "../service/helper.js";
import parameter from "../service/state.js";
// import Swiper from "swiper"
export default {
  props: ["swiperData"],
  data() {
    return {
		img_code:0
	};
  },
  components:{},
  methods: {
	  arrow(num){
		  this.img_code = this.img_code + num
		  console.log(this.img_code);
	  }
  },
  watch: {},
  mounted() {},
};
</script>
<style scoped lang="less">
.swiper-container {
  margin: 10px auto;
  width: 300px;
  height: 300px;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.swiper-wrapper img {
  object-fit: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  width: 300px;
  height: 300px;
//   overflow-x: auto;
//   overflow-y: hidden;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
}
</style>